<template>
  <el-container class="chat-container">
    <el-header>Header</el-header>
    <el-main><ChatBoxMain /></el-main>
    <el-footer><ChatBoxFooter /></el-footer>
  </el-container>
</template>

<script setup>
import ChatBoxMain from "./ChatBoxMain.vue";
import ChatBoxFooter from "./ChatBoxFooter.vue";
const props = defineProps({
  // chat: {
  // 	type: Object,
  // 	required: true
  // }
});
const closeRefBox = () => {
  console.log("closeRefBox");
};
const readedMessage = () => {
  console.log("readedMessage");
};
</script>
<style lang="scss">
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  :deep(.el-header) {
    height: 60px;
    padding: 0;
    border-bottom: 1px solid #eee;
  }

  :deep(.el-main) {
    flex: 1;
    padding: 0;
    overflow: hidden; // 防止出现双滚动条
  }

  :deep(.el-footer) {
    height: auto;
    padding: 0;
    border-top: 1px solid #eee;
  }
}
</style>
